<!--订单信息-->
<nz-card>
  <h1>订单信息</h1>
  <nz-row>
    <nz-col nzSpan="24">
      <a style="color: white;margin-right: 4px" *ngIf="detail?.rentOrder?.deliverUrl" nz-button nzType="primary" [href]="detail?.rentOrder?.deliverUrl" target="_blank">交付确认单</a>
      <a style="color: white;margin-right: 4px" *ngIf="detail?.rentOrder?.userInfoAgreementUrl" nz-button nzType="primary" [href]="detail?.rentOrder?.userInfoAgreementUrl" target="_blank">个人信息授权查询书</a>
      <a style="color: white;margin-right: 4px" *ngIf="detail?.rentOrder?.leaseContractUrl" nz-button nzType="primary" [href]="detail?.rentOrder?.leaseContractUrl" target="_blank">租赁合同</a>
    </nz-col>
  </nz-row>
  <nz-row>
    <nz-col nzSpan="4">订单编号：{{detail?.rentOrder?.orderNum}}</nz-col>
    <nz-col nzSpan="6">订单状态：{{hireDeviceService.ORDERSTATUS[detail?.rentOrder?.status]}}</nz-col>
    <nz-col nzSpan="6">下单时间：{{detail?.rentOrder?.createTime}}</nz-col>
    <nz-col nzSpan="6" [nz-tooltip]="detail?.rentOrder?.note">备注：{{detail?.rentOrder?.note}}</nz-col>
  </nz-row>
</nz-card>

<!--个人信息-->
<nz-card>
  <h1>收货信息</h1>
  <nz-row>
    <nz-col nzSpan="4">姓名：{{detail?.rentOrder?.consignee}}</nz-col>
    <nz-col nzSpan="6">手机号：{{detail?.rentOrder?.tel}}</nz-col>
    <nz-col nzSpan="14" [nz-tooltip]="detail?.rentOrder?.area+detail?.rentOrder?.address">
      收货地址：{{detail?.rentOrder?.area}}{{detail?.rentOrder?.address}}</nz-col>
  </nz-row>
</nz-card>

<!--支付宝人脸认证信息-->
<nz-card>
  <h1>支付宝人脸认证信息</h1>
  <nz-row>
    <nz-col nzSpan="4">姓名：{{detail?.rentOrder?.faceAuthInfo?.name}}</nz-col>
    <nz-col nzSpan="6">身份证号：{{detail?.rentOrder?.faceAuthInfo?.idCard}}</nz-col>
    <nz-col nzSpan="6">结果：
      <span>
        <ng-container
          *ngIf="!detail?.rentOrder?.faceAuthInfo?.result&&detail?.rentOrder?.faceAuthInfo?.result!==0; else faceAuthInfoTemplate"></ng-container>
        <ng-template #faceAuthInfoTemplate>
          {{detail?.rentOrder?.faceAuthInfo?.result * 1 === 1 ? '通过' : '不通过'}}
        </ng-template>
      </span>
    </nz-col>
  </nz-row>
</nz-card>

<!--实名认证信息-->
<nz-card>
  <h1>实名认证信息</h1>
  <nz-row>
    <nz-col nzSpan="4">姓名：{{detail?.userCertification?.certName}}</nz-col>
    <nz-col nzSpan="6">身份证号：{{detail?.userCertification?.certNo}}</nz-col>
    <nz-col nzSpan="4">出生日期：{{detail?.userCertification?.birthday}}</nz-col>
    <nz-col nzSpan="4">下单年龄：{{detail?.userCertification?.age}}岁</nz-col>
    <nz-col nzSpan="2">性别：{{detail?.userCertification?.sex * 1 === 1 ? '男' : '女'}}</nz-col>
  </nz-row>
  <div>
    <span style="display: inline-flex;flex-direction: column;align-items: center;margin-right: 24px">
      <img
        nz-image
        width="300px"
        height="180px"
        [nzFallback]="hireDeviceService['ERRIMG']"
        [nzSrc]="detail?.userCertification?.userImage"
      />
      <span>头像面</span>
    </span>
    <span style="display: inline-flex;flex-direction: column;align-items: center">
      <img
        nz-image
        width="300px"
        height="180px"
        [nzFallback]="hireDeviceService['ERRIMG']"
        [nzSrc]="detail?.userCertification?.userBackImage"
      />
      <span>国徽面</span>
    </span>
  </div>
</nz-card>

<!--商品信息-->
<nz-card>
  <h1>商品信息</h1>
  <nz-row>
    <nz-col nzSpan="4" style="display: flex;flex-direction: row;">
      <img
        nz-image
        width="60px"
        height="60px"
        style="margin-right: 8px"
        [nzFallback]="hireDeviceService['ERRIMG']"
        [nzSrc]="detail?.rentOrder?.goodsIcon"
        *ngIf="detail?.rentOrder?.goodsIcon"
      />
      <span>
        <div [nz-tooltip]="detail?.rentOrder?.goodsName">{{detail?.rentOrder?.goodsName}}</div>
        <div>产品类型：{{detail?.goods?.goodsType === 1 ? '全新机' : '二手机'}}</div>
      </span>
    </nz-col>
    <nz-col nzSpan="18">
      <nz-row>
        <nz-col nzSpan="6">品牌：{{detail?.goods?.brand}}</nz-col>
        <nz-col nzSpan="6">型号：{{detail?.goods?.modelType}}</nz-col>
        <nz-col nzSpan="6">数量：{{detail?.goods?.num}}</nz-col>
        <nz-col nzSpan="6">颜色：{{detail?.goods?.colorName}}</nz-col>
        <nz-col nzSpan="6">机身存储：{{detail?.goods?.memoryName}}</nz-col>
        <nz-col nzSpan="6">产品IMEI号：{{detail?.goods?.imei}}</nz-col>
        <nz-col nzSpan="6">商品押金：￥{{detail?.goods?.deposit}}</nz-col>
        <nz-col nzSpan="6">设备成本：￥{{detail?.goods?.equipmentCost}}</nz-col>
        <nz-col nzSpan="6">买断价格：￥{{detail?.goods?.buyout}}</nz-col>
      </nz-row>
    </nz-col>
  </nz-row>
</nz-card>

<!--租赁信息-->
<nz-card>
  <h1>租赁信息</h1>
  <nz-row>
    <nz-col nzSpan="24">租赁方案：{{ hireDeviceService['PLAN'][detail?.rentOrder?.planId] }}</nz-col>
    <nz-col nzSpan="24">租期：{{ detail?.rentOrder?.rper }}</nz-col>
    <nz-col nzSpan="24">期数：{{detail?.rentOrder?.nper}}</nz-col>
    <nz-col nzSpan="24">用户租期：{{ detail?.rentOrder?.rbtime }}至{{ detail?.rentOrder?.retime }}</nz-col>
    <nz-col nzSpan="24">总租金：￥{{detail?.rentOrder?.totalRent}}</nz-col>
    <nz-col nzSpan="24">已还租金：￥{{detail?.rentOrder?.payRent}} <a
      (click)="showRentModal(detail?.rentBillRecordList)">查看</a></nz-col>
  </nz-row>
</nz-card>

<!--物流信息-->
<nz-card>
  <h1>物流信息</h1>
  <nz-row *ngFor="let exp of detail?.mallOrderExpressList">
    <nz-col nzSpan="4">物流公司：{{exp?.expressName}}</nz-col>
    <nz-col nzSpan="6">物流单号：<a (click)="showExpressDetail(exp)">{{exp?.expressNum}}</a></nz-col>
  </nz-row>
</nz-card>

<!--物流信息详情-->
<nz-modal
  [nzVisible]="expressModal.visible"
  nzTitle="物流信息"
  nzWidth="600px"
  [nzFooter]="null"
  (nzOnCancel)="hideExpressModal()">
  <div *nzModalContent>
    <div>物流公司：{{expressModal.name}}</div>
    <div>物流单号：{{expressModal.num}}</div>
    <div style="padding-top: 8px;max-height: 600px;overflow-y: auto">
      <nz-timeline>
        <nz-timeline-item *ngFor="let exp of expressModal.expressList">
          <div>{{exp['station']}}</div>
          <div style="color: #666666">{{exp['time']}}</div>
        </nz-timeline-item>
      </nz-timeline>
    </div>
  </div>
</nz-modal>

<!--租金记录-->
<nz-modal
  [nzVisible]="rentModal.visible"
  nzTitle="租金记录"
  nzWidth="1000px"
  [nzFooter]="null"
  (nzOnCancel)="hideRentModal()">
  <div *nzModalContent>
    <div>
      <nz-table #rentModalTable [nzShowPagination]="false" nzBordered [nzData]="rentModal.list"
                [nzPageSize]="9999">
        <thead>
        <tr>
          <th nzAlign="center" nzWidth="100px">期数</th>
          <th nzAlign="center">应还租日期</th>
          <th nzAlign="center">应还租金</th>
          <th nzAlign="center">状态</th>
          <th nzAlign="center">本期结清时间</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let data of rentModalTable.data">
          <td nzAlign="center">{{ data['nper'] }}</td>
          <td nzAlign="center">{{ data['date'] }}</td>
          <td nzAlign="center">{{ data['rent'] }}</td>
          <td nzAlign="center">{{ hireDeviceService.payStatus[data['status']] }}</td>
          <td nzAlign="center">{{ data['payTime'] || '-' }}</td>
        </tr>
        </tbody>
      </nz-table>
    </div>
  </div>
</nz-modal>
